<!-- 修改角色 -->
<template>
  <div>
    <el-dialog
      title="修改角色"
      :visible.sync="editDialog"
      width="30%"
      :before-close="handleClose"
      size="mini"
      :close-on-click-modal="false"
    >
      <el-form ref="roleForm" :model="roleForm" label-width="80px" size="mini">
        <el-form-item label="角色名称">
          <el-input v-model="roleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="授权标识">
          <el-input v-model="roleForm.auth"></el-input>
        </el-form-item>
        <!-- <el-form-item label="类型">
          <el-select v-model="roleForm.type" placeholder="请选择" style="width: 100%">
            <el-option
              v-for="item in types"
              :key="item.code"
              :label="item.remark"
              :value="item.code"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="级别">
          <el-input-number v-model="roleForm.level" :min="0" :max="99"></el-input-number>
        </el-form-item> -->
        <el-form-item label="是否启用">
          <el-radio-group v-model="roleForm.enable">
            <el-radio v-for="item in enables" :key="item.code" :label="item.code">{{
              item.remark
            }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="分配权限">
          <el-tabs @tab-click="handleClickPerm" v-model="entityTypeCode">
            <el-tab-pane
              :key="index"
              v-for="(item, index) in perms"
              :label="item.remark"
              :name="item.code"
            >
              <div v-if="item.name == 'menu'">
                <el-tree
                  @check="handleCheckApiPerm"
                  :data="item.entityDatum"
                  check-strictly
                  check-on-click-node
                  show-checkbox
                  node-key="id"
                  :default-expanded-keys="[2, 3]"
                  :default-checked-keys="getChecked(item.code)"
                  :props="defaultProps"
                >
                </el-tree>
              </div>
              <div v-else>
                <el-checkbox-group @change="handleModifyDataPerm" v-model="checkEntity[item.code]">
                  <el-checkbox
                    v-for="permItem in item.entityDatum"
                    :key="permItem.id"
                    :label="permItem.id"
                    >{{ permItem.name }}</el-checkbox
                  >
                </el-checkbox-group>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="roleForm.remark"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleEditSubmit" size="mini">确定</el-button>
          <el-button @click="handleClose" size="mini">关闭</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Object
    },
    perms: {
      type: Array
    },
    types: {
      type: Array
    },
    enables: {
      type: Array
    },
    checkeds: {
      type: Array
    },
    checkEntity: ''
  },
  watch: {
    checkeds(newVal) {
      //this.dataPermList = newVal
    }
  },
  data() {
    return {
      editDialog: true,
      defaultProps: {
        id: "id",
        children: "children",
        label: "name"
      },
      roleForm: {},
      entityTypeCode: "10000",
      checkedPerms: []
    }
  },
  created() {
    this.roleForm = this.data
    console.log(this.checkEntity)
  },
  mounted() {},
  methods: {
    /**
     * 获取选择的实体数据
     */
    getChecked(typeCode){
      const entity = this.checkEntity;
      if(!entity || entity == '') return [];

      for (const item in entity) {
        if(typeCode == item){
          return entity[item];
        }
      }
      return [];
    },
    /**
     * 重置表单数据
     */
    handleResetRoleForm() {
      this.roleForm = this.data
    },
    /**
     * 关闭修改对话框
     */
    handleClose() {
      this.handleResetRoleForm()
      this.$emit("close")
    },
    /**
     * 提交修改
     */
    handleEditSubmit() {
      this.roleForm.permEntities = this.checkedPerms
      this.$emit("submit", this.roleForm)
    },
    /**
     * 切换权限类型
     */
    handleClickPerm(val) {
      this.$emit("queryChecked", this.roleForm.id, this.entityTypeCode)
    },
    /**
     * 选择菜单(api权限)
     */
    handleCheckApiPerm(checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys) {
      const checkKeys = []
      checkKeys.push(...checkedKeys.halfCheckedKeys)
      checkKeys.push(...checkedKeys.checkedKeys)
      this.handleModifyPerm(this.entityTypeCode, checkKeys)
    },
    /**
     * 选中数据权限(data权限)
     */
    handleModifyDataPerm(dataPerms) {
      console.log(dataPerms)
      this.handleModifyPerm(this.entityTypeCode, dataPerms)
    },
    /**
     * 权限改变
     */
    handleModifyPerm(typeCode, entityIds) {
      const permDatum = {
        typeCode: typeCode,
        entityIds: entityIds
      }

      let flag = true
      for (let i = 0; i < this.checkedPerms.length; i++) {
        if (this.checkedPerms[i].typeCode == permDatum.typeCode) {
          this.checkedPerms[i] = permDatum
          flag = false
          break
        }
      }
      if (flag) this.checkedPerms.push(permDatum)

      console.log("perms->", this.checkedPerms)
    }
  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>